<template>
  <div class="ComparisonAnalysis">
    <div class="filter">
      <el-form ref="form" label-width="90px">
        <el-form-item label="点位类型:">
          <div class="el_consist" :style="{width: itemWidth + 'px', height: pointType.height}">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="pointType.checkType.length > 0 && pointType.checkType.length < pointType.types.length"
              v-model="pointType.checkAll"
              @change="handle_p_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="pointType.checkType" @change="handle_p_t_CheckChange">
              <el-checkbox
                v-for="item in pointType.types"
                :key="item.value"
                :label="item.value"
                name="type"
              >{{item.text}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            :label="0"
            name="type"
            v-show="itemCount < pointType.types.length + 1"
            @change="handle_p_t_lookMore"
          >查看更多</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <div class="left">
      <div class="left-head">设备树</div>
      <div class="tree-list">
        <Tree-List
          ref="TreeList"
          :data="deviceTreeList"
          :showCheckbox="true"
          :showIcon="true"
          :showState="true"
          @vtl_nodeCheckClick="nodeCheckClick"
          @vtl_dataChange="treeDataChange"
          @vtl_nodeClick="vtl_nodeClick"
          @vtl_nodeLabelClick="vtl_nodeClick"
        ></Tree-List>
        <!-- :filterCheckedDisabled="filterCheckedDisabled" -->
      </div>
    </div>
    <div class="center">
      <div class="center-top">
        <div class="center-operation">
          <el-form ref="form" label-width="80px">
            <el-row>
              <el-col>
                <el-form-item label="开始时间:">
                  <el-date-picker
                    v-model="getPointHistrysParm.startTime"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                    :picker-options="startPickerOptions"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间:">
                  <el-date-picker
                    v-model="getPointHistrysParm.endTime"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                    :picker-options="endPickerOptions"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="采集信息:">
                  <el-radio-group v-model="getPointHistrysParm.saveType">
                    <el-radio :label="2">可见光</el-radio>
                    <el-radio :label="1">红外</el-radio>
                    <el-radio :label="3">音视频</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="background-color: #eeeeee;">
              <el-col>
                <el-button class="but-query" type="text" size="medium" @click="queryClick()">
                  <i class="query-icon"></i>查询
                </el-button>
                <el-button class="but-reset" type="text" size="medium" @click="reset_data()">
                  <i class="reset-icon"></i>重置
                </el-button>
                <el-button class="but-export" type="text" size="medium" @click="exportExcel">
                  <i class="export-icon"></i>导出
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- <div class="center-head">
          <span class="head-text">巡检结果</span>
        </div>-->
        <el-table
          :data="tableData"
          border
          stripe
          size="mini"
          class="center-list"
          style="width: 100%;"
          height="calc(100% - 81px - 32px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column type="selection" align="center" width="50"></el-table-column>
          <el-table-column prop="reconTime" label="识别时间"></el-table-column>
          <el-table-column prop="point.name" label="点位名称"></el-table-column>
          <el-table-column width="100px" prop="value" label="识别结果">
            <template slot-scope="scope">
              <span>{{scope.row ? matchArrayContentStr(scope.row.value, meterReadingDealWith) : "未知"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="info" label="采集信息">
            <template slot-scope="scope">
              <el-button
                class="pic_button"
                type="text"
                size="mini"
                @click="showImage(scope.row.flirPic)"
                :hidden="!(scope.row.point && (scope.row.point.saveTypeId === 1 || !scope.row.point.saveTypeId === 4))"
              >红外图片</el-button>
              <el-button
                class="pic_button"
                type="text"
                size="mini"
                @click="showImage(scope.row.cameraPic)"
                :hidden="!(scope.row.point && (scope.row.point.saveTypeId === 2 || !scope.row.point.saveTypeId === 4))"
              >可见光图片</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-area">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[20, 50, 100, 300]"
            :page-size="getPointHistrysParm.size"
            :current-page="getPointHistrysParm.page"
            :total="tansksTotal"
          ></el-pagination>
        </div>
      </div>
      <div class="center-bottom">
        <div class="chart-line-area">
          <div id="chartline" class="chart-line"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-head">
        <el-radio-group v-model="squareRadioValue" @change="squareRadioChange">
          <el-radio label="1">2 * n</el-radio>
          <!-- <el-radio label="2">2 * 3</el-radio> -->
          <el-radio label="3">3 * n</el-radio>
          <!-- <el-radio label="4">3 * 4</el-radio> -->
        </el-radio-group>
      </div>
      <div id="image_list" class="img-list">
        <ul>
          <li v-for="item in tableData" :key="item.id">
            <img
              class="item-img"
              :src="item.point && item.point.saveTypeId == 2 ? item.cameraPic : item.flirPic"
              alt
            />
            <div class="item-name">{{item.point.name}}</div>
          </li>
        </ul>
      </div>
      <div class="pagination-area-image">
        <el-pagination
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 300]"
          :page-size="getPointHistrysParm.size"
          :current-page="getPointHistrysParm.page"
          :total="tansksTotal"
          :pager-count="5"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  pointHistoryList,
  pointHistoryContrast,
  pointsTree
} from "@/api/apiManagement";
import echarts from "echarts";
import { formatJson } from "@/utils";
import {
  dateToDateStr,
  getDateTopMonth,
  dateToDateWithToSecondStr
} from "@/utils/utilsMethod";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import TreeList from "@/components/TreeList";
import {
  matchArrayContent,
  PointType,
  MeterReadingDealWith
} from "@/utils/constant";

export default {
  components: { TreeList },
  data() {
    return {
      robot_id: null,
      deviceTreeList: [],
      checkTreeItem: [],
      getPointHistrysParm: {
        page: 0,
        size: 20,
        pointIds: "",
        startTime: "",
        endTime: "",
        saveType: ""
      },
      tansksTotal: 0,
      tableData: [],
      multipleSelection: [],
      chartLine: null,
      lineOption: {
        grid: {
          top: 50,
          bottom: 100,
          left: 60,
          right: 36
        },
        title: {
          text: "",
          subtext: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "5"
          //   bottom: "0"
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true }
            // saveAsImage: { show: true }
          }
        },
        calculable: true,
        dataZoom: {
          show: true,
          type: "slider",
          height: 18,
          start: 0
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {
              padding: [5, -15, -10, 0],
              formatter: "{value}",
              interval: "auto",
              rotate: 25,
              fontSize: 10
            },

            data: []
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: []
      },
      viewer: null,
      squareRadioValue: "2",

      itemCount: 5,
      itemWidth: 220 * 5,
      pointType: {
        types: PointType,
        checkType: [],
        checkAll: false,
        height: "31px"
      },

      startPickerOptions: {
        disabledDate: time => {
          let endTime =
            this.getPointHistrysParm.endTime === null
              ? ""
              : this.getPointHistrysParm.endTime;
          return (
            time.getTime() > new Date(endTime).getTime() ||
            time.getTime() > Date.now() - 8.64e6
          );
        }
      },
      endPickerOptions: {
        disabledDate: time => {
          let startTime =
            this.getPointHistrysParm.startTime === null
              ? ""
              : this.getPointHistrysParm.startTime;
          return (
            time.getTime() <
              new Date(startTime).getTime() - 8 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 8.64e6
          ); //如果没有后面的-8.64e6就是不可以选择今天的   减去一天的时间代表可以选择同一天
        }
      },
      meterReadingDealWith: MeterReadingDealWith
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.getPointHistrysParm.robotId = this.robot_id;
    this.getPointHistrysParm.startTime = dateToDateStr(
      getDateTopMonth(new Date())
    );
    this.getPointHistrysParm.endTime = dateToDateStr(new Date());
    // 点位树
    this.getPointsTree();
  },
  mounted() {
    this.initChartLine();
    this.squareRadioChange("2");
  },
  methods: {
    exportExcel() {
      if (this.multipleSelection.length > 0) {
        require.ensure([], () => {
          const { export_json_to_excel } = require("vendor/Export2Excel");
          const tHeader = ["识别时间", "点位名称", "识别结果", "采集信息"];
          const filterVal = ["reconTime", "point.name", "value", "picUrl"];
          let temp = JSON.parse(JSON.stringify(this.multipleSelection));
          const data = formatJson(filterVal, this.formatAlartType(temp));
          export_json_to_excel(
            tHeader,
            data,
            "对比分析表" + dateToDateWithToSecondStr(new Date())
          );
        });
      } else {
        this.$message({
          message: "请选择数据"
        });
      }
    },
    formatAlartType(data) {
      let array = data.slice(0);
      array.forEach((item, index) => {
        var picUrl =
          item.point &&
          (item.point.saveTypeId === 1 || item.point.saveTypeId === 4)
            ? item.flirPic
            : item.point.saveTypeId === 2
            ? item.cameraPic
            : "";
        var picType =
          item.point &&
          (item.point.saveTypeId === 1 || item.point.saveTypeId === 4)
            ? "红外图片"
            : item.point.saveTypeId === 2
            ? "可见光图片"
            : "";
        item["picUrl"] = picType + "_" + picUrl;
        item["value"] = matchArrayContent(
          item.pointHistory.value,
          MeterReadingDealWith
        );
      });
      return array;
    },
    // 点位树
    getPointsTree() {
      pointsTree()
        .then(response => {
          if (response) {
            this.deviceTreeList = response;
          }
        })
        .catch(() => {});
    },
    getPointHistoryList() {
      this.getPointHistrysParm.startTime =
        this.getPointHistrysParm.startTime == null
          ? ""
          : this.getPointHistrysParm.startTime;
      this.getPointHistrysParm.endTime =
        this.getPointHistrysParm.endTime == null
          ? ""
          : this.getPointHistrysParm.endTime.length <= 10 &&
            this.getPointHistrysParm.endTime.length != 0
          ? this.getPointHistrysParm.endTime + " 24:00:00"
          : this.getPointHistrysParm.endTime;

      var parm = {
        page: this.getPointHistrysParm.page,
        size: this.getPointHistrysParm.size,
        robotId: this.getPointHistrysParm.robotId,
        pointIds: this.getPointHistrysParm.pointIds,
        startTime: this.getPointHistrysParm.startTime,
        endTime: this.getPointHistrysParm.endTime,
        saveType: this.getPointHistrysParm.saveType
      };
      pointHistoryList(parm)
        .then(response => {
          if (response) {
            this.tableData = response.list.filter(d => d.point);
            this.tansksTotal = response.total;

            this.$nextTick(() => {
              if (this.viewer) {
                this.viewer.destroy();
                this.viewer == null;
              }

              const ViewerDom = document.getElementById("image_list");
              this.viewer = new Viewer(ViewerDom, {
                // 相关配置项,详情见下面
                show: function() {
                  this.viewer.update();
                }
              });
              this.squareRadioChange(this.squareRadioValue);
            });
          }
        })
        .catch(() => {});
    },
    getPointHistoryContrast() {
      let parm = {
        pointIds:
          this.getPointHistrysParm.pointIds === undefined
            ? ""
            : this.getPointHistrysParm.pointIds,
        startTime:
          this.getPointHistrysParm.startTime == null
            ? ""
            : this.getPointHistrysParm.startTime,
        endTime:
          this.getPointHistrysParm.endTime == null
            ? ""
            : this.getPointHistrysParm.endTime,
        saveType:
          this.getPointHistrysParm.saveType === undefined
            ? ""
            : this.getPointHistrysParm.saveType
      };
      pointHistoryContrast(parm)
        .then(response => {
          if (response) {
            let series = [];
            let xAxisData = [];
            response.forEach(function(item, index) {
              let data = [];
              let itemXAxisData = [];
              if (item.pointHistory && item.pointHistory.length > 0) {
                item.pointHistory.forEach(function(item, index) {
                  if (item.value != -404) {
                    data.push(item.value);
                    itemXAxisData.push(item.createTime);
                  }
                });
              }
              series.push({
                name: item.pointName,
                type: "line",
                smooth: true,
                data: data
              });
              if (itemXAxisData.length > xAxisData.length) {
                xAxisData = itemXAxisData;
              }
            });
            this.lineOption.series = series;
            this.lineOption.xAxis[0].data = xAxisData;
            this.chartLine.setOption(this.lineOption, true);
          }
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.getPointHistrysParm.size = val;
      this.getPointHistoryList();
    },
    handleCurrentChange(val) {
      this.getPointHistrysParm.page = val;
      this.getPointHistoryList();
    },
    // 加载图表
    initChartLine() {
      this.chartLine = echarts.init(document.getElementById("chartline"));
      this.chartLine.setOption(this.lineOption, true);
    },
    squareRadioChange(value) {
      var nW = 2;
      var nH = 3;
      if (value === "1") {
        nW = 2;
        nH = 2;
      }
      if (value === "2") {
        nW = 2;
        nH = 3;
      }
      if (value === "3") {
        nW = 3;
        nH = 3;
      }
      if (value === "4") {
        nW = 3;
        nH = 4;
      }
      var list = document
        .getElementsByClassName("img-list")[0]
        .getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].style.width = "calc(100% / " + nW + " - 4px" + ")";
        list[i].style.height = "calc(100% / " + nH + " - 4px" + ")";
      }
    },
    showImage(val) {
      var image = new Image();
      image.src = val;
      var viewer = new Viewer(image, {
        navbar: false,
        hidden: function() {
          viewer.destroy();
        }
      });
      viewer.show();
    },
    queryClick() {
      let checkNodes = this.$refs.TreeList.vtl_getCheckedNodes().filter(
        item => item.leaf == true
      );
      let checkNodesIds = checkNodes.map(item => {
        if (typeof item.id === "string" && item.id.indexOf("point_") != -1) {
          let index = item.id.lastIndexOf("_");
          let slice = item.id.substring(index + 1);
          return slice;
        }
        return "";
      });
      this.getPointHistrysParm.pointIds = checkNodesIds.join(",");
      if (
        this.getPointHistrysParm.pointIds &&
        this.getPointHistrysParm.pointIds.length > 0
      ) {
        this.getPointHistoryList();
        this.getPointHistoryContrast();
      } else {
        this.$message({
          message: "请选择对比点"
        });
      }
    },
    reset_data() {
      this.getPointHistrysParm.page = 0;
      this.getPointHistrysParm.size = 20;
      this.getPointHistrysParm.pointIds = "";
      this.getPointHistrysParm.startTime = dateToDateStr(
        getDateTopMonth(new Date())
      );
      this.getPointHistrysParm.endTime = dateToDateStr(new Date());
      this.getPointHistrysParm.saveType = "";

      this.lineOption.series = [];
      this.lineOption.xAxis[0].data = [];
      this.chartLine.setOption(this.lineOption, true);

      this.tableData = [];
      this.$refs.TreeList.vtl_setCheckedNodesId([]);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    nodeCheckClick(tree, list, obj, data) {
      var tempList = [];
      let checkPoint = this.$refs.TreeList.vtl_getCheckedNodes().filter(
        item => item.leaf == true
      );
      let checkParentNodes = null;
      if (checkPoint.length > 0) {
        checkParentNodes = this.$refs.TreeList.vtl_getNode({
          id: checkPoint[0].parentId
        });
      }
      for (let i = 0, len = list.length; i < len; i++) {
        let item = list[i];
        if (item.leaf) {
          if (checkPoint.length > 0 && checkParentNodes) {
            let itemParentNodes = this.$refs.TreeList.vtl_getNode({
              id: item.parentId
            });
            if (itemParentNodes.deviceTypeId == checkParentNodes.deviceTypeId) {
              if (data.unit) {
                if (
                  data.unit.replace(/\s+/g, "") !=
                  this.checkTreeItem[0].unit.replace(/\s+/g, "")
                ) {
                  tempList.push(item.id);
                }
              }
            } else {
              tempList.push(item.id);
            }
          }
        } else {
          tempList.push(item.id);
        }
      }
      this.$refs.TreeList.vtl_setCheckedDisabledNodesId(tempList);
    },
    treeDataChange(tree, list, obj) {
      var tempList = [];
      for (let i = 0, len = list.length; i < len; i++) {
        let item = list[i];
        if (!item.leaf) {
          tempList.push(item.id);
        }
      }
      this.$refs.TreeList.vtl_setCheckedDisabledNodesId(tempList);
    },
    vtl_nodeClick(list, table, index, data) {
      this.$refs.TreeList.vtl_setCheckedNodesSingleId({ id: data.id });
    },

    handle_p_t_CheckAllChange(val) {
      this.pointType.checkType = val
        ? this.pointType.types.map(item => {
            return item.value;
          })
        : [];
      this.treeDataReorganization();
    },
    handle_p_t_CheckChange(val) {
      this.pointType.checkAll = this.pointType.types.length === val.length;
      this.treeDataReorganization();
    },
    handle_p_t_lookMore(val) {
      this.pointType.height = val ? "auto" : "31px";
    },
    // 树状数据重组
    treeDataReorganization() {
      this.$refs.TreeList.vtl_setCurrentNodeId({});
      this.$refs.TreeList.vtl_nodesFilter({
        deviceAreasList: [],
        deviceTypeList: [],
        recognitionTypeList: [],
        pointType: this.pointType.checkType,
        meterTypeList: [],
        deviceAppearanceTypeList: [],
        useList: []
      });
    },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    }
  }
};
</script>

<style>
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.ComparisonAnalysis {
  width: 100%;
  height: 100%;
  min-width: 1430px;
}
.ComparisonAnalysis .left {
  position: relative;
  width: 300px;
  height: 100%;
  /* background-color: #eeeeee; */
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
}
.ComparisonAnalysis .center {
  /* width: 100%; */
  width: 760px;
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
}
.ComparisonAnalysis .center-top {
  width: 100%;
  height: 54%;
  position: relative;
}
.ComparisonAnalysis .center-top .el-table {
  margin-left: 0px;
  margin-right: 10px;
}
.ComparisonAnalysis .center-bottom {
  width: 100%;
  height: 46%;
  position: relative;
}
.ComparisonAnalysis .left-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.ComparisonAnalysis .tree-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
  overflow: auto;
}
.ComparisonAnalysis .center-operation {
  width: 100%;
  height: 81px;
  padding: 1px 0px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.ComparisonAnalysis .center-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.ComparisonAnalysis .head-text {
  margin-left: 10px;
}
.ComparisonAnalysis .center-list {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 113px);
  /* display: flex;
  flex-flow: column; */
}
.ComparisonAnalysis .center-list .el-table__body-wrapper {
  /* overflow: hidden;
  overflow-y: auto;
  flex-grow: 1; */
}
.ComparisonAnalysis .pagination-area {
  position: absolute;
  width: 100%;
  height: 32px;
  bottom: 0px;
  background-color: #eeeeee;
  overflow: hidden;
}

.ComparisonAnalysis .chart-line-area {
  width: 100%;
  height: 100%;
}
.ComparisonAnalysis .chart-line {
  width: 100%;
  height: 100%;
}

.ComparisonAnalysis .left .custom-tree-node span {
  font-size: 13px;
}
.ComparisonAnalysis .folder {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(10, 158, 80); */
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
  float: left;
}
.ComparisonAnalysis .file {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(255, 0, 0); */
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
  float: left;
}

.ComparisonAnalysis .alarm {
  width: 12px;
  height: 13px;
  margin: 3px 2px 0 2px;
  float: left;
}
.ComparisonAnalysis .normal {
  background-color: rgb(50, 150, 50);
}
.ComparisonAnalysis .warning {
  background-color: rgb(0, 0, 255);
}
.ComparisonAnalysis .general-alarm {
  background-color: rgb(255, 255, 0);
}
.ComparisonAnalysis .serious-alarm {
  background-color: rgb(255, 128, 10);
}
.ComparisonAnalysis .danger-alarm {
  background-color: rgb(155, 0, 0);
}
.ComparisonAnalysis .center-operation .el-form-item {
  /* width: 300px; */
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}
.ComparisonAnalysis .center-operation .el-form-item__label {
  line-height: 26px;
  float: left;
}
.ComparisonAnalysis .center-operation .el-date-editor.el-input {
  width: 200px;
}
.ComparisonAnalysis .center-operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.ComparisonAnalysis .center-operation .el-input__inner {
  height: 26px;
  line-height: 26px;
}
.ComparisonAnalysis .center-operation .el-input__icon {
  line-height: 26px;
}
.ComparisonAnalysis .center-operation .el-radio + .el-radio {
  margin-left: 15px;
}

.ComparisonAnalysis .right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 1060px);
  min-width: 360px;
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
}
.ComparisonAnalysis .right-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.ComparisonAnalysis .right-head .el-radio + .el-radio {
  margin-left: 13px;
}
.ComparisonAnalysis .img-list {
  width: 100%;
  height: calc(100% - 59px);
  padding: 2px 1px;
  overflow-y: auto;
}
.ComparisonAnalysis .right .img-list ul,
.ComparisonAnalysis .right .img-list li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.ComparisonAnalysis .right .img-list ul {
  width: 100%;
  height: 100%;
}
.ComparisonAnalysis .right .img-list li {
  width: calc(100% / 2 - 4px);
  height: calc(100% / 3 - 4px);
  padding: 1px;
  float: left;
  text-align: center;
  vertical-align: middle;
  border: solid 2px #fff;
  background: #eeeeee;
}
.ComparisonAnalysis .pagination-area-image .el-pager li {
  min-width: 24px;
}
.ComparisonAnalysis .pagination-area-image .el-pagination .btn-next {
  padding-left: 0px;
}
.ComparisonAnalysis .item-img {
  max-width: 100%;
  height: calc(100% - 21px);
}
.ComparisonAnalysis .item-name {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
}
.ComparisonAnalysis .right .el-pagination__total {
  margin-right: 0px;
}
.ComparisonAnalysis .right .el-input {
  /* width: 100px !important; */
  margin: 0 2px !important;
}
.ComparisonAnalysis .right .el-pagination__sizes {
  margin: 0 2px 0 0;
}
.ComparisonAnalysis .right .el-pagination__jump {
  margin-left: 5px;
}

.ComparisonAnalysis .but-query,
.ComparisonAnalysis .but-export,
.ComparisonAnalysis .but-reset {
  height: 27px;
  margin-left: 8px;
  margin-right: 15px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.ComparisonAnalysis .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.ComparisonAnalysis .export-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/export.png);
  background-size: 100% 100%;
  float: left;
}
.ComparisonAnalysis .reset-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%;
  float: left;
}
.ComparisonAnalysis .pic_button {
  margin-left: 0px;
  margin-right: 10px;
}

.ComparisonAnalysis .filter {
  position: relative;
  width: 100%;
  /* height: 65px; */
  background-color: #eeeeee;
}
.ComparisonAnalysis .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 0px;
  border-bottom: 1px solid #cae7ee;
}
.ComparisonAnalysis .filter .el-form-item .el_consist {
  float: left;
  overflow: hidden;
}
.ComparisonAnalysis .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.ComparisonAnalysis .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.ComparisonAnalysis .filter .el-checkbox {
  width: 80px;
  margin-left: 10px;
}
.ComparisonAnalysis .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}
.ComparisonAnalysis .allCheckBox {
  float: left;
}
</style>